<script setup lang="ts">
defineOptions({
  name: "MachineAdvocacy"
});
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartsAlarm from "@/views/machine/operation/overView/components/chartsAlarm.vue";
import { useRouter } from "vue-router";
import { queryMachineAvocacy } from "@/api/machineApi";

const router = useRouter();

interface Props {
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**  是否暗色，默认为false */
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: "机械科宣导栏",
  dark: false,
  width: 330,
  height: 200,
  boxShadow: false,
  borderRidus: true
});

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const title_height = computed(() => (props.title ? "38px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

const advocacyOpt = ref("");

const clickHandler = path => {
  router.push({
    path: "/machine/handleover/list"
  });
};

const getAdvocacy = async () => {
  const res: any = await queryMachineAvocacy({
    pageNum: 1,
    pageSize: 20,
    className: "MACHINE",
    handoverStatus: "",
    commonValue: "",
    handoverPerson: "",
    successorPerson: "",
    handoverTime: "",
    handoverStartTime: "",
    handoverEndTime: ""
  });
  const descStr = res.data && res.data.length ? res.data[0].propagandaItem : null;
  advocacyOpt.value = descStr;
};

onMounted(() => {
  getAdvocacy();
});
</script>

<template>
  <div class="today-task" :class="{ boxShadow, borderRidus, 'model-title-com-dark': dark }">
    <modelTitle v-if="title" :title="title">
      <div class="model-title-slot">
        <!-- <px-button v-if="button" type="primary" size="small" plain @click="clickHandler">{{ button }}</px-button> -->
        <px-icon class="torouter" color="#3B82F6" @click="clickHandler">
          <ArrowRight />
        </px-icon>
      </div>
    </modelTitle>
    <div v-if="advocacyOpt" class="today-task-com">
      <div class="model_chart" style="width: 100%; height: 100%">
        <px-scrollbar>
          <div class="title-text">
            {{ advocacyOpt }}
          </div>
        </px-scrollbar>
      </div>
    </div>
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.today-task {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }

    .px-icon {
      cursor: pointer;
    }
  }

  .today-task-com {
    width: 100%;
    height: calc(100% - v-bind(title_height));
  }
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}

.model-title-com-dark {
  color: #fff;
  background-color: #001e3b;
  border: 1px solid #83b2ff;
  box-shadow: inset 0 0 10px 0 #83b2ff;

  .title-text {
    color: #fff !important;
  }

  :deep(.model-title-com) {
    border-color: #00c2ff !important;
  }
}

.title-text {
  white-space: pre-line;
}
</style>
